<template>
  <div class="login-page">
    <!-- model  表单数据对象  Object      status-icon 是否在输入框中显示校验结果反馈图标    rules 表单验证规则 object   ref 组件实列的应用            -->
  <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
    <h1 class="size">管理系统</h1>
    <!-- prop  表单域model字段，在使用validate,resetFields方法的情况下，该属性是必填的   表单验校 -->
  <el-form-item label="用户名" prop="username"> 
    <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
  </el-form-item>
</el-form>
<div class="video">
  <video muted="muted" src="../../../video/bg_video.d2d602a9.mp4" autoplay="autoplay" loop="loop" preload="auto"></video>
</div>
  </div>
</template>


<script>
//登入逻辑的实现

//1.收集用户输入的username&paaaword传递给后端

//2.登入通过后，将后端返回的token存到本地 跳转到主页

//3.每次请求的时候，携带token到请求头authorization

//4.展示token校验 正确的数据

//5.校验不通过，跳转到登入页

import {login} from "@/api"
//映射
import {mapMutations} from "vuex"

  export default {
    data() {
           //jsDoc
      /**
       * @param {Object} rule 就是一个表单验证对象
       * @param {String} value 输入值
       * @param {Function} callback  校验通过不传参，不通过传参
       */
      // param  代表要描述的参数是什么  Object} 描述的类型  rule 字段
      var validateUsername = (rule, value, callback) => {
        //用户名正则， 4到16位(字母，数字，下划线,减号)
        // var uPattern =/^[a-zA-Z0-9_-]{4,16}$/;
        if(!value){
          callback("4到16位(字母，数字，下划线,减号")
        }else{
          callback()
        }
                          
        // console.log(rule);
        // console.log(value);
        // if (value === '') {
        //   callback(new Error('请输入密码'));
        // } else {
        //   if (this.loginForm.password !== '') {
        //     this.$refs.loginForm.validateField('password');
        //   }
        //   callback();
        // }
      };
      var validatePassword = (rule, value, callback) => {
        if(!value){
          callback("请输入密码")
        }else{
          callback()
        }
      };
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' } //trigger 触发   blur焦点
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      ...mapMutations(["SET_USERINFO"]),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {//代表本地校验通过
          //打开登录加载动画
          const loading =this.$loading({
          lock: true,
          text: '正在加载....',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
          let {username,password} = this.loginForm
          //发送登录请求
        login(username,password)
        .then(res=>{
          //服务器关闭，关闭动画
loading.close();
          console.log(res);
          if(res.data.state){
              this.$message("登录成功");
            //用户名密码正确
            localStorage.setItem("ht2006-token",res.data.token);
            localStorage.setItem("ht-userInfo",JSON.stringify(res.data.userInfo))
            //设置vuex中state['userInfo]的值
this.SET_USERINFO(res.data.userInfo)

            //跳转到主页
            this.$router.push("/")
          }else{
            //用户名或者密码错误
           this.$message.error("户名密码错误")
          }
        })
        .catch(err=>{
          console.log(err);
        })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
/* 表单样式  */
.el-form{
  width: 400px; 
margin: 80px auto;
background-color: royalblue;
padding: 60px 0;
position: absolute;
margin-left: 700px;
z-index: 1;
opacity: 0.8;
}
.el-button{
  width: 180px;
  height: 50px;
  font-size: 20px;
}
.size{
  width: 100%;
  height: 50px;
  text-align: center;
  margin-bottom: 30px;
  color: aliceblue;
}
.video{
  width: 100%;
height: 100%;
overflow: hidden;
}
</style>
